import styled from 'styled-components'
export const PlaySonglistWrapper = styled.div`
  position:fixed;
  bottom:45px;
  left:50%;
  transform: translate(-50%);
  background-color:rgb(22,22,22);
  border-radius:10px;



`
export const ContentWrapper = styled.div`
  display: flex;

`

export const LeftSonglistWrapper = styled.div`
  width:553px;
  height:260px;
  border-right:5px solid rgb(12,11,11);
  .left-header{
    height:40px;
    line-height:40px;
    display: flex;
    justify-content:space-between;
    border-bottom:1px solid rgb(33,33,33);
    .list_name{
      font-size:14px;
      color:#E2E2E2;
      margin-left:40px;
      width: 300px;
    }
    .collect,.remove {
      color:#ccc;
      margin-right:20px;
    }
  }
  .songlist{
    height:100%;
    overflow: scroll;
  }

`
export const SongListWrapper = styled.div`
    .icon{
      background-position:-172px 8px ;
      width: 20px;
      height:20px;
      opacity:${props => {
        return props.isActive ? 1 : 0
      }};
    }
    display: flex;
    height:28px;
    line-height:28px;
    color:${props => props.isActive ? '#fff' : '#ccc'};
    justify-content:space-between;
    .name{
      width:250px;
      margin-left:-20px;
    }
    .artist{
      width: 150px;
      text-align:center;
    }
    .dt{
     margin-right:20px;
    }

`
export const RightSonglistWrapper = styled.div`
  width: 420px;
  .right-header{
    height:40px;
    line-height:40px;
    text-align:center;
    position: relative;
    border-bottom:1px solid rgb(33,33,33);

    .song_name{
      color:#fff;
      font-size:14px;
    }
    .close{
      color:#ccc;
      position: absolute;
      font-size:20px;
      right:5px;
      top:0;
      cursor:pointer;
    }
  }
  .lyc_list{
    height:260px;
    overflow:scroll;
    .lyc_item{
      height: 32px;
      line-height:32px;
      text-align:center;
      color:#989898;
    }
    .active{
      color:#fff;
      font-size:14px;
    }
  }
`